import React, { Suspense } from 'react';
import { useRoutes } from 'react-router-dom'
const LayOut = React.lazy(() => import('../layout'))
const Home = React.lazy(() => import('../views/Home/index'))
const AdviceFeedback = React.lazy(() => import('../views/AdviceFeedback/index'))
const AnnounceList = React.lazy(() => import('../views/AnnounceList/index'))
const AnnounceTypeList = React.lazy(() => import('../views/AnnounceTypeList/index'))
const ArticleList = React.lazy(() => import('../views/ArticleList/index'))
const ArticleTypeList = React.lazy(() => import('../views/ArticleTypeList/index'))
const BannerList = React.lazy(() => import('../views/BannerList/index'))
const CategoryList = React.lazy(() => import('../views/CategoryList/index'))
const ColumnList = React.lazy(() => import('../views/ColumnList/index'))
const CommentList = React.lazy(() => import('../views/CommentList/index'))
const Login = React.lazy(() => import('../views/Login/index'))


export const _MENUS_LIST = [{
  path: '/',
  element: <Home></Home>,
  meta: {
    title: '首页'
  }
}, {
  path: '/column',
  meta: {
    title: '栏目管理'
  },
  children: [{
    path: '/column/list',
    element: <ColumnList></ColumnList>,
    meta: {
      title: '栏目列表'
    }
  }]
}, {
  path: '/article',
  meta: {
    title: '文章管理'
  },
  children: [{
    path: '/article/list',
    element: <ArticleList></ArticleList>,
    meta: {
      title: '文章列表'
    }
  }, {
    path: '/article/type/list',
    element: <ArticleTypeList></ArticleTypeList>,
    meta: {
      title: '文章类型列表',
      roles: ['admin']
    }
  }]
}, {
  path: '/announce',
  meta: {
    title: '公告管理'
  },
  children: [{
    path: '/announce/list',
    element: <AnnounceList></AnnounceList>,
    meta: {
      title: '公告列表'
    }
  }, {
    path: '/announce/type/list',
    element: <AnnounceTypeList></AnnounceTypeList>,
    meta: {
      title: '公告类型列表'
    }
  }]
}, {
  path: '/banner',
  meta: {
    title: '轮播管理'
  },
  children: [{
    path: '/banner/list',
    element: <BannerList></BannerList>,
    meta: {
      title: '轮播列表'
    }
  }]
}, {
  path: '/category',
  meta: {
    title: '分类管理',
    roles: ['admin']
  },
  children: [{
    path: '/category/list',
    element: <CategoryList></CategoryList>,
    meta: {
      title: '分类列表'
    }
  }]
}, {
  path: '/comment',
  meta: {
    title: '评论管理',
    roles: ['admin', 'teacher']
  },
  children: [{
    path: '/comment/list',
    element: <CommentList></CommentList>,
    meta: {
      title: '评论列表',
      roles: ['admin']
    }
  }, {
    path: '/comment/advice/feedback',
    element: <AdviceFeedback></AdviceFeedback>,
    meta: {
      title: '意见反馈',
      roles: ['teacher']
    }
  }]
}]

const _ROUTERS_LIST = [{
  path: '/',
  element: <LayOut></LayOut>,
  children: _MENUS_LIST
}, {
  path: '/login',
  element: <Login></Login>
}]

const Router = () => {
  const RouterView = () => useRoutes(_ROUTERS_LIST)
  return (
    <Suspense fallback={<div>路由拼命加载中...</div>}>
      <RouterView></RouterView>
    </Suspense>
  )
}


export default Router